<script setup>
import { onMounted, ref } from 'vue';
    const city_name = ref("陕西省西安市")

    const weather_info = ref("")

    function getCityInfoByName(city_name){
       
    }

    onMounted(() => {
        console.log("查询物理地址信息")
        fetch(`https://restapi.amap.com/v3/geocode/geo?key=b2eea78477fa722eaf6e2549cd0c9451&address=${city_name.value}`)
        .then(response => response.json())
        .then(data => {
            console.log(data)
            const city_code = data.geocodes[0].adcode
            console.log(city_code)
            return fetch(`https://restapi.amap.com/v3/weather/weatherInfo?key=b2eea78477fa722eaf6e2549cd0c9451&city=${city_code}`)
        })
        .then(response => response.json())
        .then(data => {
            console.log(data.lives[0]);
            weather_info.value = data.lives[0]
        })
        .catch(error => console.log(error))
    })
</script>
<template>
    <input type="text" placeholder="请输入城市名称" title="输入城市名称" v-bind:value=city_name>
    <button>查询</button>
    {{ weather_info }}
</template>